/**
 * @Author Awen
 * @Date 2024/06/01
 * @Email wengaolng@gmail.com
 **/

:root{
    --go-captcha-theme-text-color: #333333;
    --go-captcha-theme-bg-color: #ffffff;
    --go-captcha-theme-btn-color: #ffffff;
    --go-captcha-theme-btn-disabled-color: #749ff9;
    --go-captcha-theme-btn-bg-color: #4e87ff;
    --go-captcha-theme-btn-border-color: #4e87ff;
    --go-captcha-theme-active-color: #3e7cff;
    --go-captcha-theme-border-color: rgba(206, 223, 254, 0.5);
    --go-captcha-theme-icon-color: #3C3C3C;
    --go-captcha-theme-drag-bar-color: #e0e0e0;
    --go-captcha-theme-drag-bg-color: #3e7cff;
    --go-captcha-theme-drag-icon-color: #ffffff;
    --go-captcha-theme-round-color: #e0e0e0;
    --go-captcha-theme-loading-icon-color: #3e7cff;
    --go-captcha-theme-body-bg-color: #34383e;

    --go-captcha-theme-default-color: #3e7cff;
    --go-captcha-theme-default-bg-color: #ecf5ff;
    --go-captcha-theme-default-border-color: #3e7cff;
    --go-captcha-theme-default-hover-color: #e0efff;

    --go-captcha-theme-error-color: #ed4630;
    --go-captcha-theme-error-bg-color: #fef0f0;
    --go-captcha-theme-error-border-color: #ff5a34;

    --go-captcha-theme-warn-color: #ffa000;
    --go-captcha-theme-warn-bg-color: #fdf6ec;
    --go-captcha-theme-warn-border-color: #ffbe09;

    --go-captcha-theme-success-color: #5eaa2f;
    --go-captcha-theme-success-bg-color: #f0f9eb;
    --go-captcha-theme-success-border-color: #8bc640;
}

.wrapper {
    padding: 12px 16px;
    background-color: var(--go-captcha-theme-bg-color);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
}

.theme {
    border: 1px solid rgba(206, 223, 254, 0.5);
    border-color: var(--go-captcha-theme-border-color);

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
    -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
    -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
}

.header {
    height: 36px;
    width: 100%;
    font-size: 15px;
    color: var(--go-captcha-theme-text-color);

    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items: center;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    :global {
        span {
            flex: 1;
            padding-right: 5px;
        }

        em {
            padding: 0 3px;
            font-weight: bold;
            color: var(--go-captcha-theme-active-color);
            font-style: normal;
        }
    }
}

.body{
    position: relative;
    width: 100%;
    margin-top: 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background: var(--go-captcha-theme-body-bg-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    overflow: hidden;
}

.bodyInner {
    background: var(--go-captcha-theme-body-bg-color);
}

.picture{
    position: relative;
    z-index: 2;
    width: 100%;
}

.hide{
    visibility: hidden;
}

.loading{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    margin-left: -34px;
    margin-top: -34px;
    line-height: 68px;
    text-align: center;

    display: flex;
    align-content: center;
    justify-content: center;

    :global{
        svg, circle {
            color: var(--go-captcha-theme-loading-icon-color);
            fill: var(--go-captcha-theme-loading-icon-color);
        }
    }
}

.footer{
    width: 100%;
    height: 50px;
    color: #34383e;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
    align-items: center;
    padding-top: 10px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.iconBlock{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
    align-items: center;
    :global{
        svg{
            color: var(--go-captcha-theme-icon-color);
            fill: var(--go-captcha-theme-icon-color);
            margin: 0 5px;
            cursor: pointer;
        }
    }
}

.buttonBlock{
    width: 120px;
    height: 40px;

    :global{
        button{
            width: 100%;
            height: 40px;
            //letter-spacing: 2px;
            text-align: center;
            padding: 9px 15px;
            font-size: 15px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            color: var(--go-captcha-theme-btn-color);
            background-color: var(--go-captcha-theme-btn-bg-color);
            border: 1px solid transparent;
            border-color: var(--go-captcha-theme-btn-bg-color);
            -webkit-appearance: none;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: .1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;

            &.disabled {
                pointer-events: none;
                background-color: var(--go-captcha-theme-btn-disabled-color);
                border-color: var(--go-captcha-theme-btn-disabled-color);
            }
        }
    }
}

.dragSlideBar {
    width: 100%;
    height: 100%;
    position: relative;
    touch-action: none;
}

.dragLine{
    position: absolute;
    height: 14px;
    background-color: var(--go-captcha-theme-drag-bar-color);
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.dragBlock {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -20px;
    width: 82px;
    height: 40px;
    z-index: 2;
    background-color: var(--go-captcha-theme-drag-bg-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;

    box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);
    -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);
    -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);

    :global{
        svg{
            color: var(--go-captcha-theme-drag-icon-color);
            fill: var(--go-captcha-theme-drag-icon-color);
        }
    }
}

.disabled {
    pointer-events: none;
    background-color: var(--go-captcha-theme-btn-disabled-color);
    border-color: var(--go-captcha-theme-btn-disabled-color);
}

.dragBlockInline {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}